<template>
	<view>
		<!-- 导航菜单 -->
		<view>
			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
				<block id="demo1" class="scroll-view-item_H uni-bg-red" v-for="(item,index) in list" :key="index">
					<text class="text-area-top" @click="chang(index)"
						:class="ActiveIndex==index? 'active':''">{{item}}</text>
				</block>
			</scroll-view>
		</view>
		<!-- 图片轮播 -->
		<view class="lunbo">
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration" circular>
				<block v-for="(item,index) in images" :key="index">
					<swiper-item>
						<image class="imgs-lunbo" :src="item"></image>
						<!-- circular --- 衔接滑动 -->
					</swiper-item>
				</block>
			</swiper>
		</view>
		<!-- 公告 -->
		<view class="gongao">
			<view class="gongao-text">公告:</view>
			<swiper class="swiper-gongao" :vertical="vertical" :autoplay="autoplay" :interval="interval"
				:duration="duration" circular>
				<block v-for="(item,index) in gongaotext" :key="index">
					<swiper-item>
						<view>{{item}}</view>
						<!-- circular --- 衔接滑动 -->
					</swiper-item>
				</block>
			</swiper>
		</view>
		<!-- 热销 -->
		<view class="progress">
			<scroll-view scroll-x class="scol-menu" v-bind:scroll-left="scollLeft">
				<!-- 热销 -->
				<view v-for="(item,index) in menulsit" :key="index" style="width: 500px;">
					<view style="width: 75;height: 75;margin:10px 25px;text-align: center;float: left;">
						<image style="width: 40px;height: 40px;" :src="item.imgs"></image>
						<view>{{item.txts}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 热销的进度条 -->
		<view class="progress-bar">
			<view class="proger-item">

			</view>
		</view>
		<!-- 商品列表 -->
		<view class="shop-menu">
			<block v-for="(item,index) in shoplist" :key="index">
				<view
					style="width: 48%;height: 200px;background-color: rgba(255, 255, 255, 0.9);margin-left: 15rpx;margin-top: 20rpx;display: inline-block;">
					<image style="width: 99%;height: 130px;border-bottom: #C0C0C0 1px solid;" :src="item.imgs"></image>
					<view style="line-height: 40px;text-indent: 10px;">{{item.txts}}</view>
					<view style="color: tomato;text-indent: 10px;">￥{{item.pic}}</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 导航菜单文案
				list: ['家电', '护肤品', '女装套装', '鞋袜', '水果',
					'纯奶果糖', '新年礼物', '手机电器', '电脑配置',
					'家具套件', '中国结', '发饰', '手机壳', '数据项',
					'靴子'
				],
				ActiveIndex: 0,//点击的下标
				// 轮播图片
				images: ['../../static/images/banner/1.jpg', '../../static/images/banner/2.jpg',
					'../../static/images/banner/3.jpg', '../../static/images/banner/4.jpg',
					'../../static/images/banner/5.jpg'
				],
				indicatorDots: true,//是否显示面板指示点
				autoplay: true,//自动滑动
				interval: 2000,//自动切换时间间隔
				duration: 500,//滑动动画时长
				// 公告
				gongaotext: ['今年夏天冰火两重天', '今年深圳雨水比较多', 'CCCCCCCCCCCCCCCCCCCC'],
				vertical: true,//是否纵向
				menulsit: [{//热销
					txts: "热销1",
					imgs: "../../static/images/hotprod/1.png"
				}, {
					txts: "热销2",
					imgs: "../../static/images/hotprod/2.png"
				}, {
					txts: "热销3",
					imgs: "../../static/images/hotprod/3.png"
				}, {
					txts: "热销4",
					imgs: "../../static/images/hotprod/4.png"
				}, {
					txts: "热销5",
					imgs: "../../static/images/hotprod/5.png"
				}, {
					txts: "热销6",
					imgs: "../../static/images/hotprod/6.png"
				}, {
					txts: "热销7",
					imgs: "../../static/images/hotprod/7.png"
				}, {
					txts: "热销8",
					imgs: "../../static/images/hotprod/8.png"
				}, {
					txts: "热销9",
					imgs: "../../static/images/hotprod/9.png"
				}, {
					txts: "热销10",
					imgs: "../../static/images/hotprod/10.png"
				}, {
					txts: "热销11",
					imgs: "../../static/images/hotprod/11.png"
				}],
				proLeft: 0,//进度条移动后与左边的间距
				// 商品列表
				shoplist: [{
					imgs: "../../static/images/goods/1.jpg",
					txts: "淤泥坊",
					pic: "130"
				}, {
					imgs: "../../static/images/goods/2.jpg",
					txts: "淤泥坊",
					pic: "130"
				}, {
					imgs: "../../static/images/goods/3.jpg",
					txts: "淤泥坊",
					pic: "130"
				}, {
					imgs: "../../static/images/goods/4.jpg",
					txts: "淤泥坊",
					pic: "130"
				}, {
					imgs: "../../static/images/goods/5.jpg",
					txts: "淤泥坊",
					pic: "130"
				}, {
					imgs: "../../static/images/goods/6.jpg",
					txts: "淤泥坊",
					pic: "130"
				}, {
					imgs: "../../static/images/goods/7.jpg",
					txts: "淤泥坊",
					pic: "130"
				}, {
					imgs: "../../static/images/goods/8.jpg",
					txts: "淤泥坊",
					pic: "130"
				}, {
					imgs: "../../static/images/goods/9.jpg",
					txts: "淤泥坊",
					pic: "130"
				}, {
					imgs: "../../static/images/goods/10.jpg",
					txts: "淤泥坊",
					pic: "130"
				}, {
					imgs: "../../static/images/goods/11.jpg",
					txts: "淤泥坊",
					pic: "130"
				}, {
					imgs: "../../static/images/goods/12.jpg",
					txts: "淤泥坊",
					pic: "130"
				}, {
					imgs: "../../static/images/goods/13.jpg",
					txts: "淤泥坊",
					pic: "130"
				}, {
					imgs: "../../static/images/goods/14.jpg",
					txts: "淤泥坊",
					pic: "130"
				}, {
					imgs: "../../static/images/goods/15.jpg",
					txts: "淤泥坊",
					pic: "130"
				}, {
					imgs: "../../static/images/goods/16.jpg",
					txts: "淤泥坊",
					pic: "130"
				}, {
					imgs: "../../static/images/goods/17.jpg",
					txts: "淤泥坊",
					pic: "130"
				}, {
					imgs: "../../static/images/goods/18.jpg",
					txts: "淤泥坊",
					pic: "130"
				}, {
					imgs: "../../static/images/goods/19.jpg",
					txts: "淤泥坊",
					pic: "130"
				}, {
					imgs: "../../static/images/goods/20.jpg",
					txts: "淤泥坊",
					pic: "130"
				}, {
					imgs: "../../static/images/goods/21.jpg",
					txts: "淤泥坊",
					pic: "130"
				}],
			}
		},
		onLoad() {

		},
		methods: {
			chang(index) {
				this.ActiveIndex = index
			},
			scollLeft() {
				// this.proLeft=
			}
		}
	}
</script>

<style scoped>
	/* 导航菜单 */
	.scroll-view_H {
		white-space: nowrap;
	}

	.text-area-top {
		display: inline-block;
		padding: 0px 5px;
	}

	.active {
		color: red;
		border-bottom: red 1px solid;
		line-height: 40px;
	}

	/* 录播图片 */
	.swiper {
		height: 160px;
		width: 100%;
		margin-top: 5px;
		margin-bottom: 10px;
	}

	.imgs-lunbo {
		width: 100%;
		height: 100%;
	}

	/* 公告 */
	.gongao {
		/* margin-bottom: 20px; */
	}

	.gongao-text {
		white-space: nowrap;
		display: inline-block;
		line-height: 30px;
		float: left;
		margin-right: 5px;
	}

	.swiper-gongao {
		width: 300px;
		height: 30px;
		line-height: 30px;
		float: left;
	}

	/* 热销 */
	.scol-menu {
		width: 100%;
		height: 250px;
		margin-top: 50px;
		border-top: #C8C7CC 5px solid;
	}

	/* 热销的进度条 */
	.progress-bar {
		width: 175px;
		height: 5px;
		background-color: #C8C7CC;
		margin: 10px auto;

	}

	.proger-item {
		width: 87.5px;
		height: 5px;
		background-color: #ff0000;
		position: relative;
	}
/* 商品列表 */
	.shop-menu{
		background-color: #ecebf0;
	}
	/* .text-area {
		display: flex;
		justify-content: center;
	}
 */
	/* .title {
		font-size: 36rpx;
		color: #8f8f94;
	} */
</style>
